<template>
  <div class="app">
    <div class="login_box">
      <div class="topTitle">
        <img src="@/assets/黑马面面icon/登录/矢量智能对象 拷贝 9.png" alt />
        <span class="heima">黑马面面</span>
        <span class="line"></span>
        <span class="user_login">用户登录</span>
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
            v-model="form.phone"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            class="input"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="18">
              <el-input
                placeholder="请输入验证码"
                prefix-icon="el-icon-key"
                v-model="form.code"
                :span="18"
              ></el-input>
            </el-col>
            <el-col :span="6" class="v_img">
              <img :src="photo" alt class="img" @click="getPhoto" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="clause">
          <el-checkbox v-model="form.clause" class="xieyi" :label="true">
            我已阅读并同意
            <el-link type="primary" class="deal">用户协议</el-link>和
            <el-link type="primary" class="deal">隐私条款</el-link>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')" class="btn"
            >登录</el-button
          >
          <br />
          <el-button type="primary" @click="toEnroll" class="btn"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <img
      src="@/assets/黑马面面icon/登录/login_banner_ele.png"
      class="cover"
      alt
    />
    <enroll ref="enroll"></enroll>
  </div>
</template>

<script>
import enroll from "./enroll";
import { toLogin } from "@/api/login.js";
import router from "@/router/index.js";
export default {
  components: {
    enroll,
  },
  data() {
    return {
      form: {
        phone: "",
        password: "",
        code: "",
        clause: [],
      },
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        code: [
          {
            type: "string",
            required: true,
            message: "请填写验证码",
            trigger: "change",
          },
        ],

        phone: [
          {
            required: true,
            message: "请填写手机号",
            trigger: "change",
          },
          {
            validator: (rule, value, callback) => {
              const _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
              if (_reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确手机号"));
              }
            },
          },
        ],
        clause: [
          {
            type: "array",
            required: true,
            message: "需要同意该协议与条款",
            trigger: "change",
          },
        ],
      },
      photo: "",
      isShow: false,
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid);
          toLogin(this.form).then((res) => {
            //登录请求方法
            console.log(res);
            if (res.data.code == "200") {
              console.log(res);
              window.localStorage.setItem("token", res.data.data.token);

              router.push("/index");
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    toEnroll() {
      this.$refs.enroll.isShow = true;
    },
    getPhoto() {
      this.photo =
        process.env.VUE_APP_URL + "/captcha?type=login&random=" + Date.now();
    },
  },
  created() {
    this.getPhoto();
  },
};
</script>

<style lang="less">
.app {
  height: 100%;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .login_box {
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    padding: 47px 42px;

    .input {
      height: 45px;
    }
    .btn {
      width: 100%;
      margin-bottom: 25px;
    }
    .v_img {
      height: 40px;
      .img {
        width: 100%;
        height: 40px;
      }
    }

    .topTitle {
      //   width: 50%;
      display: flex;
      //   justify-content: space-between;
      align-items: center;
      margin-bottom: 26px;

      img {
        height: 22px;
        height: 17px;
        vertical-align: middle;
      }
      .heima {
        font-size: 24px;
        font-family: SourceHanSansCN Regular, SourceHanSansCN Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #0c0c0c;
        margin-left: 10px;
      }
      .line {
        display: inline-block;
        width: 1px;
        height: 28px;
        background: #c7c7c7;
        margin: 0 10px;
      }
      .user_login {
        font-size: 22px;
        font-family: PingFangSC Regular, PingFangSC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #0c0c0c;
      }
    }
  }
  .cover {
    width: 633px;
    height: 435px;
  }
}
</style>
